<template>
  <el-form
    :model="addEditForm"
    ref="addEditForm"
    label-width="105px"
    label-position="left"
    class="pg-shaohuo-content-add-edit-type">
    <el-dialog
      :title="`${type}捎货类型`"
      :before-close="beforeDialogClose"
      :visible.sync="dialogVisible"
      width="50%">
      <!-- 表单主题
      -------------------------- -->
      <el-form-item 
        label="捎货类型名称"
        prop="name"
        :rules="{ required: true, message: '请输入捎货类型名称', trigger: 'blur' }">
        <el-input v-model="addEditForm.name"></el-input>
      </el-form-item>

      <!-- 选择的模板
      -------------------------- -->
      <el-form-item
        v-for="(temp, index) in addEditForm.selectWidgets"
        :key="index"
        :prop="'selectWidgets.' + index + '.value'"
        :rules="{ required: true, message: '模板不能为空', trigger: 'blur' }"
        :label="`模板${CHINESE_NUMBER[index] || 'X'}`">
        <el-select v-model="temp.value"
          @visible-change="visibleChange"
          :loading="!hasAllWidgetList"
          placeholder="请选择模板">
          <el-option 
            v-for="widget in widgetList"
            :key="widget.w_id"
            :label="widget.chinese_name"
            :disabled="addEditForm.selectWidgets.some(i => i.value === widget.w_id)"
            :value="widget.w_id"></el-option>
        </el-select>
        <el-button
          v-if="index !== 0"
          class="pg-shaohuo-content-add-type__delete"
          @click="deleteWidget(index)"
          type="text" 
          icon="el-icon-delete"></el-button>
      </el-form-item>

      <!-- 添加模板按钮
      -------------------------- -->
      <el-button 
        @click="addWidget"
        type="text" icon="el-icon-plus">
        添加模板
      </el-button>
      
      <!-- 底部按钮区
      -------------------------- -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary"
          @click="submitForm"
          :loading="loadingBtn === '确定'">确 定</el-button>
      </span>
    </el-dialog>
  </el-form>
</template>

<script>
import { ShaohuoContentService } from 'services/Api'
import {
  btnLoadingMixin,
  formAddEditMixin,
  dialogCoreMixin
} from 'services/Public'
import { mapState } from 'vuex'

export default {
  name: 'PgTypeAddtype',
  mixins: [
    btnLoadingMixin,
    formAddEditMixin,
    dialogCoreMixin
  ],
  data () {
    return {
      CHINESE_NUMBER: [ '一', '二', '三', '四', '五', '六', '七', '八', '九', '十' ],
      addEditForm: {
        name: '',
        selectWidgets: [{ // 类型名字
          value: ''
        }]
      },
      widgetList: null, // 模板列表
      hasAllWidgetList: false // 是否已获取所有模板列表
    }
  },
  computed: {
    ...mapState([ 'acc_id' ]),
    // 捎货类型模板插件查询参数
    widgetListParam () { return { acc_id: this.acc_id } },
    // 添加新的捎货类型参数
    addShaohuoTypeParam () {
      return {
        acc_id: this.acc_id,
        w_ids: this.addEditForm.selectWidgets.map(i => i.value).join(','),
        name: this.addEditForm.name
      }
    },
    // 编辑捎货类型参数
    editShaohuoTypeParam () {
      return {
        acc_id: this.acc_id,
        fc_id: this.editData.fc_id,
        w_ids: this.addEditForm.selectWidgets.map(i => i.value).join(','),
        name: this.addEditForm.name
      }
    }
  },
  methods: {
    // 关闭弹窗前重置表单
    beforeDialogClose (done) {
      if (done) done()
      this.isEditing = false
      this.resetForm()
      this.addEditForm = {
        name: '',
        selectWidgets: [{ // 类型名字
          value: ''
        }]
      }
    },
    // formAddEditMixin需要 - 编辑时将传入的源数据写入当前表单
    editDataHandler (v) {
      this.addEditForm.name = v.func_name || ''
      this.addEditForm.selectWidgets = v.widget_ids
        .split(',')
        .map(i => { return { value: i } })
      if (!this.hasAllWidgetList) this.widgetList = v.widget_ids_detail
    },
    // formAddEditMixin需要 - 提交成功后的操作
    afterSubmitSuccess () {
      this.dialogComplete()
    },
    // 下拉框出现/隐藏时触发
    visibleChange (boo) {
      // 出现时判断widgetList是否已获取，没有则调用接口获取
      if (boo && !this.hasAllWidgetList) this.widgetListApi()
    },
    // 删除模板
    deleteWidget (index) {
      this.addEditForm.selectWidgets.splice(index, 1)
    },
    // 添加模板
    addWidget () {
      const newWidget = { value: '' }
      this.addEditForm.selectWidgets.push(newWidget)
    },
    // 添加新的捎货类型接口
    currentAddApi () {
      return ShaohuoContentService.addShaohuoType(this.addShaohuoTypeParam)
    },
    // 编辑捎货类型接口
    currentEditApi () {
      return ShaohuoContentService.editShaohuoType(this.editShaohuoTypeParam)
    },
    // 捎货类型模板插件查询接口
    async widgetListApi () {
      const [ err, res ] = await ShaohuoContentService.widgetList(this.widgetListParam)
      if (err) return this.$message.error(err.message || '获取失败')
      this.widgetList = res
      this.hasAllWidgetList = true
    }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/views.scss";

@include b(shaohuo-content-add-edit-type) {
  .el-form-item__content > .el-input,
  .el-form-item__content > .el-select {
    width: 80%;
  }
  @include e(delete) {
    padding-left: $--padding-base;
  }
}
</style>
